<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button class="fr" type="primary" plain @click="showItem({id:null},'true')" v-permission="'warehouseOrder.add'"
      :loading="exportLoading">新增单据
    </el-button>
    <div class="filter-container">
      <el-select class="filter-item" style="width: 120px;" filterable v-model="query.doc_types" placeholder="单据类型"
        clearable>
        <el-option v-for="i in docTypes" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-select class="filter-item" style="width: 120px;" filterable v-model="query.doc_status " placeholder="单据状态"
        clearable>
        <el-option v-for="i in docStatusTypes" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-select class="filter-item" style="width: 120px;" filterable v-model="query.is_canceled " placeholder="撤销状态"
        clearable>
        <el-option label="未撤销" :value="0"></el-option>
        <el-option label="已撤销" :value="1"></el-option>
      </el-select>
      <el-input style="width: 160px;" placeholder="输入单号" clearable prefix-icon="el-icon-search" class="filter-item"
        v-model="query.order_no"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="{row,key}">
        <span v-if="key =='order_date' && row[key] ">
          {{ row[key].slice(0,10) }}
        </span>
        <span v-else-if="key =='is_canceled'" class="text-label" :class="row[key] ? 'bg-gray': 'bg-green' ">
          {{row[key]?'已撤销':'未撤销'}}
        </span>
        <span v-else-if="key =='is_finished'" class="text-label"
          :class="row[key] =='1' ? 'bg-purple': row[key] =='0' ?'bg-gray':'bg-green' ">
          {{row[key] =="1"?'已完成':row[key] =="0"?'未开始':'执行中'}}
        </span>
      </template>
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent.stop="showItem(v.row,'false')">查看&nbsp;</a>
        <a href="#" class="text-green" @click.prevent.stop="showItem(v.row,'true')"
          v-permission="'warehouseOrder.edit'">编辑&nbsp;</a>
        <a href="#" class="text-red" @click.prevent.stop="cancelItem(v.row)"
          v-permission="'warehouseOrder.delete'">撤销&nbsp;</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'warehouseOrder',
  data: function () {
    return {
      postForList: true,
      api: this.$api.order,
      name: '仓库单据',
      columns: [
        { title: '单据类型', key: 'type', width: 100 },
        { title: '单号', key: 'order_no', width: 140 },
        { title: '单据日期', key: 'order_date', width: 100 },
        { title: '是否撤销', key: 'is_canceled', width: 100 },
        { title: '是否完成', key: 'is_finished', width: 100 },
        { title: '客户代码', key: 'cust_code', width: 100 },
        { title: '客户名称', key: 'cust_name', width: 200 },
        { title: '供应商代码', key: 'vendor_code', width: 100 },
        { title: '供应商名称', key: 'vendor_name', width: 200 },
        { title: '备注', key: 'remarks', width: 160 },
      ],

      query: {
        order_no: '',
        doc_types: '',
        doc_status: '',
        is_canceled: 0,
        // material_id: '',
      },
      docStatusTypes: [
        { label: '未开始', value: 0 },
        { label: '已完成', value: 1 },
        { label: '执行中', value: 2 },
      ],
      tableProps: {
        border: true,
        opsColWith: 160,
        hideOperations: false,
      },
      formProps: {
        disabled: false,
        dialogWidth: '80%',
        labelWidth: '140px',
      },
      docTypes: [],
      dialogShowDetail: false,
      listDetail: [],
      tablePropsDetail: {
        border: true,
        opsColWith: 120,
        hideOperations: true,
      },
      exportLoading: false,
    }
  },
  methods: {
    createItem() {
      this.data = _.cloneDeep(this.initData)
      this.editFormVisible = true
      this.mainOrderId = null
      this.mainItemData = {}
    },

    showItem(v, flag) {
      this.$store.dispatch('delView', { name: 'orderInfo' }).then((r) => {
        this.$router
          .push({
            name: 'orderInfo',
            query: {
              id: v.id || null,
              isEdit: flag,
            },
          })
          .catch(() => {})
      })
    },
    cancelItem(v) {
      this.$confirm('是否撤销单据 ' + v.order_no, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then((r) => {
          this.$request(this.api + 'cancel/' + v.id, {}, 'post').then((r) => {
            this.$message.success('操作成功')
            this.getList()
          })
        })
        .catch((e) => {})
    },
    getDetailDetail(v, flag) {
      this.$request(this.api + 'getdetailbyid?id=' + v.id).then((r) => {
        this.getSkuOptions(v.key_part_name)
        this.dataDetail = r
        this.stepIndex = flag
      })
    },
  },
  created: function () {
    this.getList()
    this.$request(this.$api.ordertype + 'getlist', {
      queryString: null,
      page: 1,
      size: 100,
    })
      .then((r) => {
        this.docTypes = r.list.map((i) => {
          return {
            label: i.code + ' ' + i.name,
            value: i.id,
          }
        })
      })
      .catch(() => {})
  },
  activated() {
    this.getList()
  },
}
</script>
<style scoped>
</style>
